<template>

  <div class="app-container">

    <el-card>
      <div>
        <div class="flex-input">
          <div>
            <el-input  v-model="getListParme.title"   placeholder="标题" />
          </div>
          <div>
            <el-input v-model="getListParme.content"  placeholder="内容" />
          </div>
          <div>
            <el-input v-model="getListParme.revicerName"  placeholder="接收人" />
          </div>
          <div>
            <el-select
                v-model="getListParme.noticeWay"
                multiple
                collapse-tags
                filterable
                collapse-tags-tooltip
                placeholder="通知方式"
                @focus="gettongzhifangshiOptions"
            >
              <el-option
                  v-for="item in tongzhifangshiOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              />
            </el-select>
          </div>
          <div >
            <el-button type="primary" icon="Search" @click="confirmClick">查询</el-button>
            <el-button  icon="Search" @click="reset">重置</el-button>
          </div>
        </div>
      </div>
    </el-card>
    <el-card style="margin-top: 10px">
      <yjxxTable ref="childGetList" v-model="getListParme"></yjxxTable>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import {getCategory} from  './../../../api/money/yjxxApi'
import yjxxTable from '@/views/money/yjxx/yjxxTable.vue'
//查询
const childGetList = ref(null)
const confirmClick = function (){
  childGetList.value.getslist()
}

//获取通知方式下拉
const tongzhifangshiOptions = ref([])
const gettongzhifangshiOptions = function (){
  getCategory({
    'bizName':'通知方式'
  })
      .then((res)=>{
        tongzhifangshiOptions.value = res.data
      })
}

//重置
import {ref} from "vue";

const reset = () => {
  for (const key in getListParme.value) {
    if (typeof getListParme.value[key] === 'object' && getListParme.value[key]!== null) {
      // 处理嵌套对象
      for (const subKey in getListParme.value[key]) {
        getListParme.value[key][subKey] = '';
      }
    } else {
      getListParme.value[key] = '';
    }
    // 单独处理 noticeWay ，将其置为空数组
    if (key === 'noticeWay') {
      getListParme.value[key] = [];
    }
  }
}
const getListParme = ref({
  title:'',//标题
  content:'',//内容
  revicerName:'', //接收人
  orderByColumn:"send_time",
  isAsc:"descending",
  noticeWay:[], //通知方式
})
</script>
<style scoped lang="scss">
.title-flex{
  display: flex;
  justify-content: space-between;
  text-align: center;

}
//弹窗的样式
.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 10px;
}
/* 设置标题宽度 */
:deep(.el-descriptions__label) {
  width: 200px;
}
/* 让内容居中显示 */
:deep(.el-descriptions__content) {
  text-align: center;
}
.dialog-one-title{
  height: 30px;
  width: 100%;
  font-size: 16px;
  font-weight: bolder;
  border-bottom: 2px solid #ffce55;
}
.dialog-box > div{
  margin: 10px 0;
}
.title-col{
  color: #337AB7;
  font-weight: bolder;
}
.flex-input{
  display: flex;
  flex-wrap: wrap;
  min-width: 1100px;
}
.flex-input>div{
  width: 19%;
  margin: 10px 10px 0 0;
}
//.data-flex{
//  display: flex;
//  margin: 0 10px 0 0;
//  div:first-child{
//    margin-right: 10px;
//  }
//}
.data-flex {
  display: flex;
  gap: 10px; /* 元素之间的间距 */

}

.date-picker-wrapper {
  flex: 1; /* 占据剩余空间 */
}

.select-wrapper {
  width: 80px; /* 选择器的固定宽度 */
  min-width: 80px; /* 最小宽度 */
}
.aaaaa{
  flex: 2;
}
</style>